<div id="link-manager" class="hide">

    <div>
        <el-dialog title="链接管理器"

                   :visible.sync="linkManagerVisible"
                   width="600px"
                   :before-close="close"
                   center >

            <el-container style="height: 500px; border: 1px solid #eee">

                <el-aside width="200px" >

                    <el-card class="link-list">
                        <div slot="header" class="clearfix">
                            <span>链接名称</span>
                        </div>
                        <ul >
                            <li v-for="(item,index) in link_dict" :key="index"
                                v-on:click="check_link( item )" >
                                {{item.title}}
                            </li>
                        </ul>
                    </el-card>

                </el-aside>

                <el-container>

                    <el-card class="link-detail">
                        <div slot="header" class="clearfix">
                            <span v-if="!checked_link">请选择链接</span>
                            <span v-if="checked_link">选中的链接：</span>
                            <span v-if="checked_link">{{checked_link.title}}</span>
                        </div>
                        <el-form ref="form"  label-width="80px">

                            <div v-if="checked_link && checked_link.params">
                                <el-form-item :label="item.title" v-for="(item,param_key) in checked_link.params" :key="param_key" >
                                    <el-input v-model="item.value"></el-input>
                                </el-form-item>
                            </div>


                        </el-form>
                    </el-card>

                </el-container>

            </el-container>
            <div slot="footer" class="dialog-footer">
                <el-button @click="close()">取 消</el-button>
                <el-button type="primary" @click="done()">确 定</el-button>
            </div>

        </el-dialog>
    </div>


</div>

<script>
    Vue.component('link-manager', {

        props: ['visible'],
        data:function(){

            return {
                linkManagerVisible: false,
                checked_link:null,
                link_dict:{
                    home:{
                        title:'首页',
                        key:'home',
                    },
                    cart:{
                        title:'购物车',
                        key:'cart',
                    },
                    category:{
                        title:'分类页面',
                        key:'category',
                        params:{
                            brand_id:{
                                title:'品牌ID',
                                key:'brand_id',
                                value:''
                            },
                            category_id:{
                                title:'分类ID',
                                key:'category_id',
                                value:''
                            }
                        }
                    },
                    product:{
                        title:'商品详情',
                        key:'product',
                        params:{
                            product_id:{
                                title:'商品ID',
                                key:'product_id',
                                value:''
                            }
                        },
                    },
                    customer:{
                        title:'用户中心',
                        key:'customer',
                    },
                    order:{
                        title:'订单列表',
                        key:'order',
                    }
                },
            }

        },
        watch:{

            visible:function( a, b ){

                this.linkManagerVisible = a;

            }
        },
        methods:{

            close:function ( close_data ) {

                this.fileManagerVisible = false;
                var data = {
                    visible:0
                };
                this.$emit('express', close_data?close_data:data );
            },

            done:function(){

                if( this.checked_link.params ){

                    for(var p in  this.checked_link.params ){
                        var item = this.checked_link.params[p];
                        item.value = item.value.replace(/^(\s+)|(\s+)$/g,'');
                        if( !item.value ){
                            alert('请填写参数:' + item.title);
                            return;
                        }
                    }
                }
                var link_str = JSON.stringify( this.checked_link );
                var link_obj =  JSON.parse( link_str );
                var data = {
                    visible:0,
                    link:link_obj
                };
                this.close( data );
            },

            check_link:function( item ){
                this.checked_link = item;
            }

        },
        created:function(){

            console.log('link manager created');
        },

        template: document.getElementById('link-manager').innerHTML

    });
</script>
<style>

    .link-list{

        /*padding:10px;*/
        height: 100%;
    }

    .link-list li{

        margin:10px 0;
        cursor:pointer;

    }

    .link-detail{
        width:100%;
    }

</style>